<template>
	<view class="rootView">
		<view class="cp-header flex_between">
			<view class="tab flex_center_align" :class="{ 'active-tab': tabCurrent == index }" v-for="(item, index) in tabList"
				:key="index" @click="menuClick(item, index)">
				{{ item.name }}
			</view>
		</view>
		<view class="cp-body">
			<view v-if="couponList.length > 0" class="cp-item">
				<view class="cp-list" v-for="(item, index) in couponList" :key="index">
					<view class="flex_between_center" v-if="item.status != 3">
						<view class="left flex_column cff4" :class="{ 'ffc': item.status == 2 }">
							<text class="fz36 bold" :class="{ 'fcl': item.status == 2 }">¥ {{ item.voucher_reduce }}</text>
							<text style="font-weight: 700; margin-top: 20rpx;" class="fz32"
								:class="{ 'fcl': item.status == 2 }">企服代金券</text>
						</view>
						<view class="middle" :class="{ 'c999': item.status == 2 }">
							<view class="fz36" style="font-weight: 700;">{{ item.voucher_name }}</view>
							<view class="time c-666" :class="{ 'cff4': item.isToday && item.status != 2 }">
								{{ item.endtime_text }} 到期
							</view>
							<view class="rules flex c999" :class="{ 'cccc': item.status == 2 }" @click="showRule(item)">
								使用规则<u-icon class="arrow" name="arrow-down" size="12"></u-icon>
							</view>
						</view>
						<image class="right-img" v-if="item.status == 2"
							src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/yishiyong.png" mode="widthFix">
						</image>
						<view v-if="item.status == 1" class="right-use flex_center_align" @click="goUse(item)">去使用
						</view>
					</view>
					<!-- 过期 -->
					<view v-if="item.status == 3" style="color: #D1D1D1;" class="flex_between align-center">
						<view class="left flex_column">
							<text class="fz36 bold">¥ {{ item.voucher_reduce }}</text>
							<text style="font-weight: 700; margin-top: 20rpx;" class="fz32">企服代金券</text>
						</view>
						<view class="middle">
							<view class="fz36" style="font-weight: 700;">{{ item.voucher_name }}</view>
							<view class="time c-666">
								{{ item.endtime_text }} 到期
							</view>
							<view class="rules flex" style="color: #D1D1D1;">
								使用规则<u-icon class="arrow" name="arrow-down" size="12"></u-icon>
							</view>
						</view>
						<image class="right-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/yiguoqi.png"
							mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<view v-if="couponList.length === 0">
				<u-empty mode="data" text='暂无优惠券' icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>
		<u-popup class="showRules" :show="showRules" :round="15" :closeOnClickOverlay="true" mode="center"
			:customStyle="{ width: '280px', minHeight: '500rpx', padding: '10px', textAlign: 'center' }"
			@close="showRules = false">
			<view style="margin-bottom: 20px;" class="fz40">
				使用规则
			</view>
			<view class="rule-text">
				<rich-text :nodes="rule"></rich-text>
			</view>
		</u-popup>
	</view>
</template>

<script>
import personalApi from "@/static/js/enterpriseServer/payment.js"
import moment from "moment"
export default {
	data() {
		return {
			showRules: false, //规则弹窗
			rule: '限企服平台企服类商品可用，同类券一次仅可用一张', //规则
			tabCurrent: 0,
			status: '',
			tabList: [{
				id: 1,
				name: "默认",
			}, {
				id: 2,
				name: "已使用",
				status: 2,
			}, {
				id: 3,
				name: "已过期",
				status: 3
			}],
			couponList: [],
			timeEnd: false
		}
	},
	onLoad() {
		this.getCouponList()
	},
	methods: {
		menuClick(item, index) {
			this.tabCurrent = index
			if (index == 1) {
				this.status = 2
			} else if (index == 2) {
				this.status = 3
			} else {
				this.status = ''
			}
			this.getCouponList()
		},
		goUse() {
			uni.navigateTo({ url: '/enterpriseServer/service/index?index=0' })
		},

		//获取优惠券列表
		async getCouponList() {
			let res = await personalApi.getCouponList({
				status: this.status
			})
			if (res.code == 1) {
				this.couponList = res.data
				for (let item of res.data) {
					let a = item.endtime * 1000 - new Date().getTime()
					let isToday = a > 0 && a < 24 * 3600 * 1000 //相差在0~一天内
					item.endtime_text = moment(item.endtime_text).format('YYYY-MM-DD')
					this.$set(item, 'isToday', isToday)
				}
			} else {
				this.$tools.msg(res.msg)
			}
		},

		//展示代金券规则
		showRule(item) {
			this.showRules = true
			// this.rule = item.voucher_rule
		}
	}
}
</script>

<style lang="scss">
@import url(@/static/css/public.css);

.rootView {
	min-height: 100vh;
	overflow-y: auto;
	background: #F6F6F6;

	.cp-header {
		margin: 30rpx 0;
		padding: 0 20rpx;
		width: 100%;
		height: 62rpx;


		.tab {
			width: 216rpx;
			height: 62rpx;
			background: #E7E7E7;
			border-radius: 55rpx;
		}

		.active-tab {
			background: #FF6161;
			color: #F4F8FB;
		}
	}

	.cp-body {
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cp-eleven-list {
			position: relative;
			padding: 40rpx;
			margin-top: 20rpx;
			width: 690rpx;
			height: 213rpx;
			background: #fff;
			border-radius: 22rpx;
			border: 2rpx solid #FF6161;

			.true-eleven {
				top: -1rpx;
				left: 0;
				position: absolute;
				width: 95rpx;
				height: 41rpx;
			}

			.price {
				font-size: 36rpx;
				font-weight: bold;
			}

			.old-price {
				margin-top: 10rpx;
				text-decoration: line-through;
				color: #999;
				font-size: 28rpx;
			}

			.right-use {
				width: 152rpx;
				height: 58rpx;
				background: #FF6161;
				border-radius: 55px;
				color: #F4F8FB;
			}

			.right-img {
				width: 110rpx;
				height: 110rpx;

			}

			.left {
				align-items: center;
			}


			.middle {
				.time {
					margin: 10rpx 0;
				}

				.arrow {
					margin-left: 20rpx;
				}
			}

		}

		.cp-list {
			padding: 40rpx;
			margin-top: 20rpx;
			width: 690rpx;
			height: 213rpx;
			background: #fff;
			border-radius: 22rpx;

			.right-use {
				width: 152rpx;
				height: 58rpx;
				background: #FF6161;
				border-radius: 55px;
				color: #F4F8FB;
			}

			.right-img {
				width: 110rpx;
				height: 110rpx;

			}

			.left {
				align-items: center;
			}


			.middle {
				.time {
					margin: 10rpx 0;
				}

				.arrow {
					margin-left: 20rpx;
				}
			}

		}
	}
}

.rule-text>rich-text {
	color: #666;
}

/deep/ .u-icon--right {
	margin-top: 10rpx;
	margin-left: 10rpx;
}
</style>